<template>
  <mavon-editor
      class="editor"
      ref="md"
      v-model="editor.value"
      @imgAdd="imgAdd"
      v-bind="editor">
  </mavon-editor>
</template>


<script>

import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import {upload} from "@/api/upload";

export default {
  name: 'markdownEditor',
  props: {
    editor: Object
  },
  data() {
    return {}
  },
  mounted() {
    this.$set(this.editor, 'ref', this.$refs.md)
  },
  methods: {
    imgAdd(pos, $file) {
      var formdata = new FormData();
      formdata.append('image', $file);

      upload(formdata).then(data => {
        if (data.data.success) {
          //将返回的url替换到文本原位置
          this.$refs.md.$img2Url(pos, data.data.data);
        } else {
          this.$message({message: data.data.msg, type: 'error', showClose: true})
        }

      }).catch(err => {
        this.$message({message: err, type: 'error', showClose: true});
      })
    }
  },
  components: {
    mavonEditor
  }
}
</script>
<style scoped>

.editor {
  z-index: 6 !important;
}

.v-note-wrapper.fullscreen {
  top: 60px !important
}
</style>
